<template>
	<view class="warning-container">
		<!-- 标签栏 -->
		<view class="tab-bar">
			<view
				v-for="(tab, idx) in tabs"
				:key="tab"
				:class="['tab-item', { active: currentTab === idx }]"
				@click="switchTab(idx)"
			>
				{{ tab }}
			</view>
		</view>

		<!-- 综合预警列表 -->
		<view v-if="currentTab === 0" class="warning-list">
			<view
				class="warning-item"
				v-for="(item, index) in compositeWarningList"
				:key="index"
			>
				<view class="warning-header" @click="togglePanel('composite', index)">
					<text class="title">{{ item.tsType == 1? '学习评估' : item.tsType == 2? '心理评估' : '智能评估' }}</text>
					<text class="level" :style="{color: item.tapLevel == 1? '#119790':'#ff4d4f'}">{{ item.tapLevel == 1? '中度预警':'重度预警' }}</text>
					<text class="arrow" :class="{ open: openCompositeIndex === index }">▼</text>
				</view>
				<view v-show="openCompositeIndex === index" class="warning-content">
					<view class="section">
						<text class="section-title">预警原因</text>
						<view class="reason-list">
							<text class="reason-item">学习态度：{{ item.saAcontent }}</text>
							<text class="reason-item">学习习惯：{{ item.shHcontent }}</text>
							<text class="reason-item">学习效果：{{ item.seContent  }}</text>
							<text class="reason-item">评估情况：{{ item.tsContent }}</text>
						</view>
					</view>
					<view class="section">
						<text class="section-title">改进建议</text>
						<view class="suggestion-list">
							<text class="suggestion-item">{{ item.tapContent }}</text>
						</view>
					</view>
					<view class="section">
						<text class="label">预警等级：</text>
						<text class="value" :style="{color: item.tapLevel == 1? '#119790':'#ff4d4f'}">{{ item.tapLevel == 1? '中度预警':'重度预警' }}</text>
					</view>
					<view class="section">
						<text class="label">预警发布人：</text>
						<text class="value">{{ item.tName }}</text>
					</view>
					<view class="section">
						<text class="label">预警时间：</text>
						<text class="value">{{ item.tapTime }}</text>
					</view>
				</view>
			</view>
			<view class="empty" v-if="compositeWarningList.length === 0">
				<image src="/static/empty.png" mode="aspectFit"></image>
				<text>暂无综合预警记录</text>
			</view>
		</view>

		<!-- 成绩预警列表 -->
		<view v-if="currentTab === 1" class="warning-list">
			<view
				class="warning-item"
				v-for="(item, index) in scoreWarningList"
				:key="index"
			>
				<view class="warning-header" @click="togglePanel('score', index)">
					<text class="title">{{ item.scName }}</text>
					<text class="level" :style="{color: item.tgarLevel == 1? '#119790':'#ff4d4f'}">{{ item.tgarLevel==1? '中度预警':'重度预警' }}</text>
					<text class="arrow" :class="{ open: openScoreIndex === index }">▼</text>
				</view>
				<view v-show="openScoreIndex === index" class="warning-content">
					<view class="section">
						<text class="label">课程成绩：</text>
						<text class="value">{{ item.scgGrade }}</text>
					</view>
					<view class="section">
						<text class="label">平时成绩：</text>
						<text class="value">{{ item.scgPgrade }}</text>
					</view>
					<view class="section">
						<text class="section-title">改进建议</text>
						<view class="suggestion-list">
							<text class="suggestion-item">{{ item.tgarContent }}</text>
						</view>
					</view>
					<view class="section">
						<text class="label">预警等级：</text>
						<text class="value" :style="{color: item.tgarLevel == 1? '#119790':'#ff4d4f'}">{{item.tgarLevel==1? '中度预警':'重度预警' }}</text>
					</view>
					<view class="section">
						<text class="label">预警发布人：</text>
						<text class="value">{{ item.tName }}</text>
					</view>
					<view class="section">
						<text class="label">预警时间：</text>
						<text class="value">{{ item.tgarCreatetime }}</text>
					</view>
				</view>
			</view>
			<view class="empty" v-if="scoreWarningList.length === 0">
				<image src="/static/empty.png" mode="aspectFit"></image>
				<text>暂无成绩预警记录</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, toRefs } from 'vue'
import {zonghelist,gradelist} from '@/api/warn.js'
import { getLastWarningType, clearLastWarningType } from '@/utils/websocket.js'

// 标签页数据
const state = reactive({
	tabs: ['综合预警', '成绩预警'],
	currentTab: 0,
	openCompositeIndex: -1,
	openScoreIndex: -1,
	compositeWarningList: [],
	scoreWarningList: []
})

// 获取综合预警列表
function getZongheList(){
	zonghelist(uni.getStorageSync("student").sSid).then(res=>{
		console.log(res)
		if(res.code == 1){
			// 按时间倒序排列，最新的在前面
			state.compositeWarningList = res.data.sort((a, b) => {
				return new Date(b.tapTime) - new Date(a.tapTime)
			})
			// 如果有新消息，自动展开第一条
			if (state.compositeWarningList.length > 0 && state.openCompositeIndex === -1) {
				state.openCompositeIndex = 0
			}
		}
	})
}

// 获取成绩预警列表
function getgradeList(){
	gradelist(uni.getStorageSync("student").sSid).then(res=>{
		console.log(res)
		if(res.code == 1){
			// 按时间倒序排列，最新的在前面
			state.scoreWarningList = res.data.sort((a, b) => {
				return new Date(b.tgarCreatetime) - new Date(a.tgarCreatetime)
			})
			// 如果有新消息，自动展开第一条
			if (state.scoreWarningList.length > 0 && state.openScoreIndex === -1) {
				state.openScoreIndex = 0
			}
		}
	})
}

// 刷新所有数据
function refreshData() {
	Promise.all([
		getZongheList(),
		getgradeList()
	]).then(() => {
		// 数据加载完成后，根据预警类型切换标签页
		switchToLastWarningType()
	})
}

// 根据最后收到的预警类型切换标签页
function switchToLastWarningType() {
	const lastWarningType = getLastWarningType()
	if (lastWarningType === 'score') {
		state.currentTab = 1 // 切换到成绩预警标签页
		// 如果有成绩预警消息，自动展开第一条
		if (state.scoreWarningList.length > 0) {
			state.openScoreIndex = 0
			state.openCompositeIndex = -1
		}
	} else {
		state.currentTab = 0 // 切换到综合预警标签页
		// 如果有综合预警消息，自动展开第一条
		if (state.compositeWarningList.length > 0) {
			state.openCompositeIndex = 0
			state.openScoreIndex = -1
		}
	}
	// 清除预警类型记录，避免下次进入时重复切换
	clearLastWarningType()
}

// 切换标签页
function switchTab(idx) {
	state.currentTab = idx
	// 切换标签时自动展开第一条消息
	if (idx === 0 && state.compositeWarningList.length > 0) {
		state.openCompositeIndex = 0
		state.openScoreIndex = -1
	} else if (idx === 1 && state.scoreWarningList.length > 0) {
		state.openScoreIndex = 0
		state.openCompositeIndex = -1
	}
}

// 展开/收起面板
function togglePanel(type, index) {
	if (type === 'composite') {
		state.openCompositeIndex = state.openCompositeIndex === index ? -1 : index
	} else {
		state.openScoreIndex = state.openScoreIndex === index ? -1 : index
	}
}

// 初始化数据
refreshData()

const {
	tabs,
	currentTab,
	openCompositeIndex,
	openScoreIndex,
	compositeWarningList,
	scoreWarningList
} = toRefs(state)
</script>

<script>
// 页面生命周期钩子
export default {
	onLoad() {
		// 页面加载时刷新数据
		this.refreshData()
	},
	onShow() {
		// 页面显示时刷新数据
		this.refreshData()
	},
	onPullDownRefresh() {
		// 下拉刷新
		this.refreshData()
		uni.stopPullDownRefresh()
	}
}
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}

.warning-container {
	padding: 30rpx;
	
	.tab-bar {
		display: flex;
		background: #fff;
		border-radius: 12rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
		.tab-item {
			flex: 1;
			text-align: center;
			padding: 24rpx 0;
			font-size: 30rpx;
			color: #666;
			background: #f5f5f5;
			&.active {
				color: #119790;
				background: #fff;
				font-weight: bold;
			}
		}
	}
	
	.warning-list {
		.warning-item {
			background-color: #fff;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 2rpx 8rpx rgba(17,151,144,0.04);
			
			.warning-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx;
				cursor: pointer;
				.title {
					font-size: 32rpx;
					color: #333;
					font-weight: 500;
				}
				.level {
					font-size: 26rpx;
					margin-left: 20rpx;
					&.danger { color: #ff4d4f; }
					&.warning { color: #faad14; }
					&.notice { color: #119790; }
				}
				.arrow {
					margin-left: 20rpx;
					font-size: 28rpx;
					transition: transform 0.2s;
					&.open { transform: rotate(180deg); }
				}
			}
			.warning-content {
				padding: 0 30rpx 30rpx 30rpx;
				.section { margin-bottom: 18rpx; }
				.section-title { font-size: 28rpx; color: #666; margin-bottom: 10rpx; display: block; }
				.reason-list, .suggestion-list {
					.reason-item, .suggestion-item {
						font-size: 28rpx;
						color: #333;
						line-height: 1.6;
						display: block;
						margin-bottom: 10rpx;
						padding-left: 20rpx;
						position: relative;
						&::before {
							content: '';
							position: absolute;
							left: 0;
							top: 16rpx;
							width: 8rpx;
							height: 8rpx;
							background-color: #119790;
							border-radius: 50%;
						}
						&:last-child { margin-bottom: 0; }
					}
				}
				.label { font-size: 26rpx; color: #666; }
				.value { font-size: 26rpx; color: #333; }
			}
		}
	}
	
	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 200rpx;
		
		image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}
		
		text {
			font-size: 28rpx;
			color: #999;
		}
	}
}
</style> 